<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show=true label-width="68px">
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="订单ID" prop="orderId">
            <el-input v-model="formData.orderId" placeholder="请输入订单ID" readonly clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名" prop="clientName">
            <el-input v-model="formData.clientName" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>

        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="上传" prop="field101" required>
            <el-upload ref="field101" :file-list="field101fileList" :action="field101Action"
                       :before-upload="field101BeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>


        <el-form>

        <el-upload action="dev-api/zxupload"
                   :http-request="requestUpload"
                   :show-file-list="false">
          <el-button size="small">
            选择
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-upload>







        </el-form>

        <el-button type="primary"   @click="zxtest1">
          测试二
        </el-button>

        <file-upload/>


      </el-form>
    </el-row>





  </div>
</template>
<script>

  import { zxtest ,delForm} from "@/api/order/form";
  import { comonlist } from "@/api/zxtest/zxtest"

  import ElButton from "element-ui/packages/button/src/button";
  import ElForm from "element-ui/packages/form/src/form";
  import Imageupload from "@/components/ImageUpload";

  import FileUpload from "@/components/FileUpload";

  export default {
    components: {
      Imageupload,
      ElForm,
      ElButton,
      FileUpload
    },
    props: [],
    data() {
      return {

        Upload: {

          //图片回显设置
          zxdialogImageUrl: 'http://localhost:/D:/ruoyi/uploadPath/张旭.png',
          zxdialogVisible: true,
          disabled: false,

          url: process.env.VUE_APP_BASE_API + "/forum/forum/multiPicturesUpload",
          url2: process.env.VUE_APP_BASE_API,
        },
        // 日期范围
        dateRange: [],


        //表单数据
        formData: {
          orderId: undefined,
        clientName: undefined,
    },
      rules: {
        orderId: [{
          required: true,
          message: '请输入订单ID',
          trigger: 'blur'
        }],
          clientName: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
      },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined
        },
        url: process.env.VUE_APP_BASE_API + "/upload"

    }
    },
    computed: {},
    watch: {},
    created() {
      this.gettestList();
    },
    mounted() {},
    methods: {

      /** 查询用户列表 */
      getList() {
        this.loading = true;
        comonlist(this.addDateRange(this.queryParams, this.dateRange)).then(response => {

          }
        );
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },



      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },



      // 覆盖默认的上传行为
      requestUpload(param) {

        var fileObj = param.file;
        let formData = new FormData();
        formData.append("file", fileObj);
        zxtest(formData);
      },






      handlePreview(file){
        window.open(file.response.url);
      },
      gettestList(){
      },
      zxtest1() {
        zxtest();
        this.$router.push('/zxtest1')
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>

<style>
</style>
